<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MyAccount Page</title>
<jsp:include page="/WEB-INF/jspf/header.jsp"></jsp:include>
<script src="${pageContext.request.contextPath}/js/metro-dialog.js"></script>
<script src="${pageContext.request.contextPath}/js/metro-notify.js"></script>
<script src="${pageContext.request.contextPath}/js/util.js"></script>
</head>
<body class="metro">
	<div class="grid" style="padding-left: 15px;">
		<div class="row">
			<div class="span4">
				Welcome "${sessionScope.rslt.fname}"
				<div class="grid" style="padding-right: 20px;">
					<jsp:include page="/WEB-INF/jspf/leftmenu.jsp"></jsp:include>
				</div>
			</div>
			<div class="span8">
				<div class="div-header">
					<h3 class="head-title">Your account details</h3>
				</div>
				<table border="0" class="table hovered">
					<tr>
						<td><font SIZE="2">Id</font></td>
						<td><input id="uid" type="text" disabled
							value="${sessionScope.rslt.uid}" class="outputtext" size="30" /></td>
					</tr>
					<tr>
						<td><font SIZE="2">First Name</font></td>
						<td><input id="fname" type="text"
							value="${sessionScope.rslt.fname}" class="outputtext" size="30" /></td>
					</tr>
					<tr>
						<td><font SIZE="2">Last Name</font></td>
						<td><input id="lname" type="text"
							value="${sessionScope.rslt.lname}" class="outputtext" size="30" /></td>
					</tr>
					<tr>
						<td><font SIZE="2">Phone no</font></td>
						<td><input id="phn" type="text"
							value="${sessionScope.rslt.phn}" class="outputtext" size="30" /></td>
					</tr>
					<tr>
						<td><font SIZE="2">Email id</font></td>
						<td><input id="eid" type="text"
							value="${sessionScope.rslt.eid}" class="outputtext" size="30" /></td>
					</tr>
					<tr>
						<td><font SIZE="2">Address</font></td>
						<td><input id="addrs" type="text"
							value="${sessionScope.rslt.addrs}" class="outputtext" size="30" /></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="row">
			<div class="span8 offset4">
				<div class="div-header">
					<%-- 					<h3 class="head-title">You have ${requestScope.msgsCount} mails in your mail box</h3> --%>
					<h3 class="head-title">You have ${sessionScope.msgsCount}
						mails in your mail box</h3>
				</div>
				<form action="delMessage" method="post">
					<c:set var="index" value="6" />
					<table>
						<c:forEach var="msg" items="${sessionScope.msgs}">
							<tr id="${msg.id}">
								<td><input type="checkbox" data-show="intermediate"
									name="msgIds" value="${msg.id}" /></td>
								<td>${sessionScope.idnam[msg.sender]}</td>
								<td>    </td>
								<td><a
									href="javascript:displayMessages('${msg.message}');return false;">
										${msg.teaser} ...</a></td>
								<td>    </td>
								<td>${msg.time}</td>
								<td>    </td>
								<td><a href="message.jsp?sid=${msg.sender}">Reply</a></td>
								<td><a
									href="javascript:deleteMessage('${msg.id}'); return false;">Delete</a>
								</td>
							</tr>
						</c:forEach>
						<tr>
							<td><button type="submit" class="button small info">Delete</button></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>  
</body>
<script type="text/javascript">
	var xmlrqstobjct = new XMLHttpRequest();
 	function deleteMessage( messageId ){
		console.log("to be deleted message id ", messageId);
		var deltDataid = "msgIds=" + messageId;
		xmlrqstobjct.onload = function(){
			alert(this.responseText);
			$('#'+messageId).remove();
			$.Notify.show(this.responseText);
		}
 	
	xmlrqstobjct.open("post", "delMessage", true);
	xmlrqstobjct.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlrqstobjct.send(deltDataid);
	};
</script>
</html>